import React, { Component } from "react";
// import { StopOutlined, ExclamationCircleOutlined } from '@ant-design/icons';
import { message, Tag, Switch } from "antd";
import { getMemberList, memberBanorpick } from "@/api/member";
import TableComponent from '@/components/TableList';
import SearchHeader from '@/components/SearchHeader';
import { getImage, getSex, getToolTip } from '@/utils/renderCell'
import { widgetProps } from '@/utils/constant';
class Member extends Component {
  tableRef = React.createRef();
  state = {
    list: [],
    editModalVisible: false, // 编辑新增 显示控制
    currentRowData: {},
    listQuery: {},
    editMode: false // 添加 编辑模式
  };

  // 表格数据更新 抛出数据
  handleGetData = data => {
    this.setState({
      list: data.list
    })
  }
  // 处理搜索
  handleSearch = (listQuery) => {
    this.setState({
      listQuery
    });
  };


  handleCheckChange = (row) => {

    // Modal.confirm({
    //   title: "更改用户状态",
    //   content: "启用/冻结 用户（用户冻结后，用户无法登陆）",
    //   okText: "确认",
    //   cancelText: "取消",
    //   onOk: () => {
    //     // freezeUser({ id: row.userId, status: Math.abs(row.status - 1)}).then(res => {
    //     //   message.success("设置成功")
    //     //   this.tableRef.current.fetchData();
    //     // })
    //   }
    // })
    const status = row.status === 1 ? 0 : 1;
    memberBanorpick({
      id: row.id,
      status
    }).then(() => {
      this.tableRef.current.fetchData();
      message.success(row.status === 1 ? '禁用成功！' : '启用成功!')
    })
  }




  // 头部搜索配置
  meta = {
    fields: [
      {
        key: 'phone',
        label: '手机号',
        widgetProps
      },
      {
        key: 'nickName',
        label: '用户昵称',
        widgetProps
      },
      {
        key: 'userName',
        label: '用户名',
        widgetProps
      },
      {
        key: 'status',
        label: '用户状态',
        widget: 'select',
        widgetProps,
        options: [
          {
            label: '可用',
            value: 0
          },
          {
            label: '禁用',
            value: 1
          }
        ]
      }
    ],
  };

  // 表格列 字段定义
  columns = [
    {
      title: '用户ID',
      dataIndex: 'id',
      width: 80,
      key: 'id',
    },
    {
      title: '用户名',
      dataIndex: 'userName',
      width: 130,
      key: 'userName',
    },
    {
      title: '昵称',
      dataIndex: 'nickName',
      width: 130,
      key: 'nickName',
    },
    {
      title: '手机号',
      dataIndex: 'phone',
      width: 120,
      key: 'phone',
    },
    {
      title: '个性签名',
      dataIndex: 'signture',
      ellipsis: true,
      width: 200,
      render: getToolTip,
      key: 'signture',
    },
    {
      title: '性别',
      dataIndex: 'gender',
      width: 80,
      key: 'gender',
      render: getSex
    },
    {
      title: '用户头像',
      dataIndex: 'avatar',
      width: 120,
      key: 'avatar',
      render: getImage
    },
    {
      title: '邀请码',
      dataIndex: 'referralCode',
      width: 130,
      key: 'referralCode',
    },
    {
      title: '推荐码',
      dataIndex: 'commendCode',
      width: 130,
      key: 'commendCode',
    },
    {
      title: '积分',
      dataIndex: 'integration',
      width: 80,
      key: 'integration',
    },
    {
      title: '是否为vip',
      dataIndex: 'isVip',
      width: 120,
      key: 'isVip',
      render: is => is ? '是' : '否'
    },
    {
      title: 'vip结束时间',
      width: 180,
      dataIndex: 'vipEndTime',
      key: 'vipEndTime'
    },

    {
      title: '用户状态',
      dataIndex: 'status',
      width: 120,
      key: 'status',
      render: (status) => {
        // 状态：0-禁用 1-正常
        let color = "", text = "";
        switch (status) {
          case 0:
            text = "禁用";
            color = "#b74725"; //红色
            break;

          default:
            text = "正常";
            color = '#25b752';
            break;
        }
        return (
          <Tag color={color} key={status}>
            {text}
          </Tag>
        );
      }
    },
    {
      title: '操作',
      key: 'action',
      width: 100,
      fixed: 'right',
      render: (text, row) => (
        <>
          <Switch checkedChildren="启用" checked={row.status === 1} unCheckedChildren="禁用" onClick={this.handleCheckChange.bind(null, row)} />
        </>
      )
    }

  ];
  render() {

    return (
      <>
        <SearchHeader onSearch={this.handleSearch} meta={this.meta}></SearchHeader>
        <br />
        <TableComponent
          tableConfig={{
            scroll: { y: 600, x: 1000 }
          }}
          getTableListApi={getMemberList}
          columns={this.columns}
          queryParams={this.state.listQuery}
          ref={this.tableRef}
          onGetData={this.handleGetData} />
      </>
    );
  }
}

export default Member;
